<chat-message id={'msgid-'+root.message.id} class={root.message.from==='Me' ?'right':'left'}>
  <div class="msg-avatar" style={`background-image: url(https://api.multiavatar.com/${root.message.from}.png)`}> </div>
    <div class="msg-bubble">
    <div class="msg-info">
      <div class="msg-info-name">{root.message.from}</div>
      <div class="msg-info-time">{state.send_timestamp_str}</div>
    </div>

    <img if={root.message.isLoading} class="msg-loading" src="static/img/loading.gif" alt="loading..." />
    <div if={!root.message.isLoading} class="msg-text">
      <markdown-message content={ root.message.content }></markdown-message>
    </div>
  </div>

  <script>
    export default {
      name: 'chat-message',
      version: '0.0.1',
      state: {
        send_timestamp_str: ''
      },
      onMounted() {
        riots.loadAll(
          ['message/raw-message.riot', 'raw-message'],
          ['message/markdown-message.riot', 'markdown-message']
        ).then(([rawMessage, markdownMessage]) => {
          rawMessage.mountIt();
          markdownMessage.mountIt();
        });

        console.log('chat-message onMounted');
        this.update({
          send_timestamp_str: dayjs(this.root.message.send_timestamp).format('YYYY-MM-DD HH:mm:ss')
        })
      },
    }
  </script>
  <style>
    chat-message {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
      font-size: 13px;
    }

    chat-message:last-of-type {
      margin: 0;
    }

    chat-message .msg-avatar {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      margin-right: 10px;
      background: #ddd;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      border-radius: 50%;
    }

    chat-message .msg-bubble {
      max-width: calc(100vw - 200px);
      padding: 10px;
      border-radius: 15px;
      background: #ffffff99;
      box-shadow: 0px 2px 6px rgb(0 0 0 / 8%), 0px 0px 4px rgb(0 0 0 / 8%);
    }

    chat-message .msg-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    chat-message .msg-info-name {
      margin-right: 10px;
      font-weight: bold;
    }

    chat-message .msg-info-time {
      font-size: 0.85em;
    }

    chat-message.left .msg-bubble {
      border-bottom-left-radius: 0;
      color: #495973;
    }

    chat-message.right {
      flex-direction: row-reverse;
    }

    chat-message.right .msg-bubble {
      background: #579ffb99;
      color: #fff;
      border-bottom-right-radius: 0;
    }

    chat-message.right .msg-avatar {
      margin: 0 0 0 10px;
    }

    chat-message .msg-loading {
      height: 18px;
      width: 100px;
      object-fit: cover;
      opacity: 0.9;
    }
  </style>
</chat-message>